<script setup lang="ts">
defineOptions({
  name: "Manger"
});
import { useColumns } from ".";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { useStaticStoreHook } from "@/store/modules/static";
import Search from "~icons/ep/search";
import Refresh from "~icons/ep/refresh";
import Delete from "~icons/ep/delete";
import EditPen from "~icons/ep/edit-pen";
import Add from "~icons/ep/circle-plus";
import Hide from "~icons/ep/hide";
import View from "~icons/ep/view";
import ArticlePublishEditor from "./PublishEditor/index.vue";
const articleTab = useStaticStoreHook().articleTab;

const {
  param,
  loading,
  columns,
  tableData,
  tableImageList,
  pagination,
  loadingConfig,
  tagOptionList,
  categoryOptionList,
  isArticlePublishEditorShow,
  tabChange,
  resetParam,
  onSearch,
  onSizeChange,
  onCurrentChange,
  articleForm,
  editorKey,
  editArticle,
  addArticle,
  deleteArticleById,
  changeTop,
  revertArticleById,
  changeArticlePublic,
  handleSelectionChange,
  deleteBatch
} = useColumns();
</script>

<template>
  <div>
    <el-card shadow="never">
      <template #header>
        <div class="card-header">文章管理</div>
      </template>
      <el-form :inline="true" class="bg-bg_color">
        <el-form-item label="文章标题：">
          <el-input
            v-model="param.articleTitle"
            placeholder="请输入文章标题"
            clearable
          />
        </el-form-item>
        <el-form-item label="文章分类：">
          <el-select
            v-model="param.categoryId"
            placeholder="请选择文章分类"
            clearable
            class="!w-[160px]"
          >
            <el-option
              v-for="(item, index) in categoryOptionList"
              :key="index"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="文章标签：" prop="status">
          <el-select
            v-model="param.tagId"
            placeholder="请选择文章标签"
            clearable
            class="!w-[160px]"
          >
            <el-option
              v-for="(item, index) in tagOptionList"
              :key="index"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="是否置顶：">
          <el-select
            v-model="param.isTop"
            placeholder="请选择是否置顶"
            clearable
            class="!w-[160px]"
          >
            <el-option label="是" value="1" />
            <el-option label="否" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            :icon="useRenderIcon(Search)"
            :loading="loading"
            @click="onSearch"
          >
            搜索
          </el-button>
          <el-button :icon="useRenderIcon(Refresh)" @click="resetParam">
            重置
          </el-button>
        </el-form-item>
      </el-form>
      <el-space class="mb-4 w-[100%] flex justify-between items-center">
        <!-- <el-button type="primary" size="small" :icon="useRenderIcon(Upload)"
        >批量导入</el-button
      > -->
        <el-button
          type="primary"
          size="small"
          :icon="useRenderIcon(Add)"
          @click="addArticle()"
          >新增</el-button
        >
        <el-button
          type="danger"
          size="small"
          :icon="useRenderIcon(Delete)"
          @click="deleteBatch"
          >批量删除</el-button
        >
      </el-space>
      <el-tabs @tab-click="tabChange">
        <template v-for="item of articleTab" :key="item.key">
          <el-tab-pane :lazy="true">
            <template #label>
              <el-tooltip :content="item.content" placement="top-end">
                <span>{{ item.title }}</span>
              </el-tooltip>
            </template>
          </el-tab-pane>
        </template>
      </el-tabs>

      <pure-table
        border
        row-key="id"
        alignWhole="center"
        showOverflowTooltip
        :loading="loading"
        :loading-config="loadingConfig"
        :data="tableData"
        :columns="columns"
        :pagination="pagination"
        @size-change="onSizeChange"
        @current-change="onCurrentChange"
        @selection-change="handleSelectionChange"
      >
        <template #image="{ row, index }">
          <el-image
            preview-teleported
            loading="lazy"
            :src="row.cover"
            :preview-src-list="tableImageList.map(v => v)"
            :initial-index="index"
            fit="cover"
            class="w-[160px] h-[80px]"
          />
        </template>
        <template #isTop="{ row }">
          <el-switch
            v-model="row.isTop"
            :active-value="1"
            :inactive-value="2"
            @click="changeTop(row)"
          />
        </template>

        <template #operation="{ row }">
          <el-button
            class="reset-margin"
            link
            type="primary"
            size="small"
            :icon="useRenderIcon(EditPen)"
            @click="editArticle(row)"
          >
            修改
          </el-button>
          <el-popconfirm
            v-if="[1, 2].includes(Number(row.status))"
            :title="`确认 ${row.status == 1 ? '隐藏' : '公开'}文章?`"
            icon-color="#66b1ff"
            @confirm="changeArticlePublic(row.id, row.status)"
          >
            <template #reference>
              <el-button
                class="reset-margin"
                link
                type="success"
                size="small"
                :icon="
                  row.status == 1 ? useRenderIcon(Hide) : useRenderIcon(View)
                "
              >
                {{ row.status == 1 ? "隐藏" : "公开" }}
              </el-button>
            </template>
          </el-popconfirm>
          <el-popconfirm
            :title="`确认删除文章${row.articleTitle}?`"
            icon-color="#66b1ff"
            @confirm="deleteArticleById(row.id, row.status, row.articleTitle)"
          >
            <template #reference>
              <el-button
                class="reset-margin"
                link
                type="danger"
                size="small"
                :icon="useRenderIcon(Delete)"
              >
                删除
              </el-button>
            </template>
          </el-popconfirm>
          <el-popconfirm
            v-if="row.status == 3"
            :title="`确认恢复文章${row.articleTitle}?`"
            icon-color="#66b1ff"
            @confirm="revertArticleById(row.id, row.articleTitle)"
          >
            <template #reference>
              <el-button
                class="reset-margin"
                link
                type="success"
                size="small"
                :icon="useRenderIcon(EditPen)"
              >
                恢复
              </el-button>
            </template>
          </el-popconfirm>
        </template>
      </pure-table>
    </el-card>
    <el-dialog
      v-model="isArticlePublishEditorShow"
      :close-on-press-escape="false"
      :show-close="false"
      fullscreen
    >
      <div class="flex justify-center items-center w-full">
        <div
          class="cursor-pointer select-none px-3 py-1 rounded text-sky-600 hover:text-white hover:bg-sky-400 transition duration-200 ease-in-out w-max"
          @click="isArticlePublishEditorShow = false"
        >
          ❌
        </div>
      </div>
      <ArticlePublishEditor
        :key="editorKey"
        v-model:visible="isArticlePublishEditorShow"
        :article-form="articleForm"
        :on-search="onSearch"
      />
    </el-dialog>
  </div>
</template>
